@message-prefix: message;
@msg-prefix: msg;
@msgList-prefix: msgList;

/**** message页面 ****/
.@{message-prefix} {
    .head-top-tabs-nav {
        .head-top-tabs-nav-item {
            height: 90px;
            color: #333;
            background: none;
            border: none;
            border-radius: 0;
            line-height: 90px;
            &.router-link-active {
                border-bottom: 4px solid @primary;
            }
        }
    }
}

/**** msg页面 ****/
.@{msg-prefix} {
    .entry__item {
        min-height: 136px;
        padding: 28px 0;
        justify-content: space-between;
        .entry__item--prepend {
            width: 50px;
            height: 50px;
            fill: #fff;
        }
        div {
            &:first-child {
                width: 76px;
                height: 76px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
    &-users {
        width: 480px;
        h5 {
            font-size: 32px;
            margin: 0;
            color: #333;
            font-weight: 400;
        }
        p {
            font-size: 24px;
            margin: 12px 0 0 0;
            color: #b4b4b4;
        }
    }
    &-time {
        &-count {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            height: 32px;
            min-width: 32px;
            color: #fff;
            border-radius: 16px;
            background-color: @error;
            i {
                transform: scale(0.9);
            }
        }
        text-align: right;
        width: 120px;
        font-size: 24px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        h5 {
            margin: 0;
            color: #ccc;
            font-weight: 400;
            text-align: right;
            font-size: 24px;
            height: 32px;
        }
    }
}

/**** 评论列表页 ****/
.@{msgList-prefix} {
    font-size: 24px;
    &-status {
        width: 286px;
    }
    &-item {
        padding: 20px;
        border-bottom: #f6f6f6 1px solid; /* no */
        background-color: #fff;

        .red {
            color: #f00;
            font-size: 24px;
            margin-top: 10px;
        }
        .green {
            color: green;
            font-size: 24px;
            margin-top: 10px;
        }
        .gray {
            color: #999;
            font-size: 24px;
            margin-top: 10px;
        }
        span.content {
            margin-bottom: 15px;
            display: inline-block;
            color: #333;
        }
        div.content {
            &.red {
                color: #f00;
            }
            color: #333;
            span {
                color: #999;
            }
        }
        .content {
            text-align: initial;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
            line-height: normal;
            color: #999;
        }
        &-bottom {
            &-img {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                div.img {
                    width: 60px;
                    height: 60px;
                    margin-right: 10px;
                    font-size: 0;
                    img {
                        width: 60px;
                        height: 60px;
                        object-fit: cover;
                    }
                }
            }
            padding-left: 97px;
            padding-top: 10px;
            section {
                &:last-child {
                    background-color: #f7f7f7;
                    padding: 11px;
                }
            }
        }
        &-top {
            font-size: 28px;
            display: flex;
            align-items: flex-start;
            color: #999;

            &-link {
                color: #333;
            }
            section.gray,
            section.red,
            section.green {
                width: 100%;
                text-align: right;
                margin: 0;
            }
            section.userInfo {
                flex:auto;
                width: 350px;
                margin-left: 20px;
                margin-right: 20px;
            }
            section {
                p {
                    margin: 11px 0 0;
                    color: #ccc;
                    font-size: 24px;
                }
            }
        }
    }
}
.amount-show {
    margin-right: 20px;
}
.replay-show {
    margin-right: 0;
    background-color: #f3f4f4;
    padding: 10px 15px;
}
.audit-show {
    margin-right: 20px;
    color: #fca308;
}
.audit-operation {
    margin-right: 0;
    color: #4bb893;
    border: 1px solid #4bb893; /* no */
    border-radius: 20px;
    padding: 0px 20px;
    font-size: 22px;
}
